<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" ,user-scalable=no>
<link rel="stylesheet" href="/css/cultivateWeb/login.css">
<style>
    button[disabled], html input[disabled] {
        cursor: not-allowed;
        background: #666;
    }

    .secs_1 {
        position: absolute;
        right: 30px;
        top: 50px;
        width: 420px;
        background-color: #fff;
        padding: 15px 20px 20px 20px;
        border-radius: 6px;
    }

    .headersp {
        padding-bottom: 10px;
        color: #000000;
        width: calc((100% - 20px) / 2);
        margin-left: 10px;
        font-size: 20px;
        text-align: center;
    }

    .headersp:hover {
        border-bottom: 3px solid #1b648e;
        color: #1b648e;
        cursor: pointer;

    }

    .headerClick {
        color: #1b648e;
        border-bottom: 3px solid #1b648e;
    }
    label.error {
        left: 6px;
        bottom: -40px;
        font-size: 15px;
        width: 100%;
    }
</style>
<body style=" height: 100%;width: 100%; position: absolute;">
<!-- 顶部导航 -->
<div th:include="cultivateWeb/header :: header(false)"></div>
<div class="logPage" id="mysectionFive"
     style="background: url('/img/loginbj.png') no-repeat; background-size: 100% 100%;
     height: calc(100% - 150px);display: flex;  align-items: center;">
    <div class="layui-container" style="    display: flex; flex-direction: row;">
        <input type="hidden" id="isName" th:value="${name}"/>
        <img id="mysectionLeftImg"
             src="/img/loginleft.png" alt="图片">
        <section id="mysection"
                 style=" display: flex;  flex-direction: column; justify-content: center;">

            <div class="div_2" id="headerOne">
                <span class="headersp headerClick" id="loginSpan" data-id="0">教师管理员登录</span>
                <span class="headersp" id="loginSpan1" data-id="01">学生登录</span>
            </div>
            <div class="div_2" id="headerTwo" style="display: none">
                <span class="headersp headerClick">账号注册</span>
            </div>
            <div id="login" class="layui-form">
                <div class="div_3" style="height: 50px;margin: 20px 0;">
                    <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;  height: 50px;">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input id="name" type="text" class=" layui-input" placeholder="请输入手机号">
                    </div>

                </div>

                <div class="div_3" style="height: 50px;margin: 20px 0; ">

                    <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;  height: 50px;">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input id="pass" type="password" class=" layui-input" placeholder="请输入密码" lay-affix="eye">

                    </div>


                </div>
                <input id="identity" type="hidden"/>

                <div class="div_3" style="margin-bottom: 20px">
                    <span class="sp_2" style="display: flex;  flex-direction: column;width: 100%;">
                        <button onclick="log();" style="width: 100%;" class="layui-btn ">登录</button>
                        <div style="display: flex; justify-content: space-between;">
                            <span class="layui-btn" style="background: none;padding: 0;margin: 0;width: 100px;
                       text-align: left;   margin-top: 10px;  color:#0069ac; font-size: 14px; ">
                                 <a style="color:#0069ac; font-size: 14px;" href="/cultivate/cultivateLogins?name=1">
                                     注册
                            </a></span>
<!--                          <span class="layui-btn" style="background: none;padding: 0;margin: 0;width: 100px;-->
<!--                                           text-align: left;   margin-top: 10px;  color:#0069ac; font-size: 14px; ">-->
<!--                    -->
<!--                              <a style="color:#0069ac; font-size: 14px;" href="/cultivate/cultivateLogins?name=2">-->
<!--                                                        验证码登录-->
<!--                                                </a>-->
<!--                                                </span>-->
<!--                        <span class="layui-btn" style="background: none;padding: 0;margin: 0;width: 100px;-->
<!--                       text-align: right;   margin-top: 10px;  ">-->
<!--                            <a href="/cultivate/forgetPass" style="color:#0069ac; font-size: 14px; ">-->
<!--                                重置密码</a></span>-->

                        </div>

                    </span>
                </div>


                <!--                <a href="/login"><span style="font-size: 18px;margin-left:12px;color:#00b38a;text-decoration: underline;font-weight: bold;">已有机构点此登录</span></a>-->
                <!--              -->

                <br/>
            </div>
            <div style="display: none" id="reg">
                <form id="signupForm" class="layui-form">

                    <div class="div_3"
                         style="height: 70px;display: flex; flex-direction: column; align-items: flex-start; ">
                        <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;
                                    text-align: left; ">
                            <select name="type" id="selectOne" lay-search="" lay-filter="select-filter-One">

                            </select>
                        </div>
                    </div>

                    <div class="div_3"
                         style="height: 70px;display: flex; flex-direction: column; align-items: flex-start; ">
                        <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">
                            <input name="name" id="name2" type="text" class=" layui-input" placeholder="请输入姓名"/>

                        </div>
                    </div>

                    <div class="div_3"
                         style="height: 70px;display: flex; flex-direction: column; align-items: flex-start; ">
                        <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">
                            <input name="num" id="num" type="text" class=" layui-input" placeholder="请输入工号或学号"/>

                        </div>
                    </div>

                    <div class="div_3"
                         style="height: 100px;display: flex; flex-direction: column; align-items: flex-start; ">
                        <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">
                            <input style="width:100%;" id="mobile" name="mobile" type="number"
                                   class=" layui-input" placeholder="请输入手机号"/>
<!--                            <input style="width: calc(100% - 90px);" id="mobile" name="mobile" type="number"-->
<!--                                   class=" layui-input" placeholder="请输入手机号"/>-->
<!--                            <button type="button" onclick="send(this,1)"-->
<!--                                    class="layui-btn layui-bg-blue layui-input-split layui-input-suffix "-->
<!--                                    style="width: 100px;pointer-events: painted;">获取验证码-->
<!--                            </button>-->
                        </div>

                    </div>

<!--                    <div class="div_3"-->
<!--                         style="height: 70px;display: flex; flex-direction: column; align-items: flex-start; ">-->
<!--                        <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">-->
<!--                            <input name="code" id="code" type="text" class=" layui-input" placeholder="请输入验证码"/>-->

<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="div_3"-->
<!--                         style="height: 70px;display: flex; flex-direction: column; align-items: flex-start; ">-->
<!--                        <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">-->
<!--                            <input name="password" id="password" type="password" class=" layui-input"-->
<!--                                   placeholder="请输入8位数新密码" lay-affix="eye"/>-->

<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="div_3"-->
<!--                         style="height: 100px;display: flex; flex-direction: column; align-items: flex-start; ">-->
<!--                        <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">-->
<!--                            <input name="passwordtwo" id="passwordtwo" type="password" class=" layui-input"-->
<!--                                   placeholder="请确认密码" lay-affix="eye"/>-->

<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="box_1" style="padding-left:40px; margin-top: 40px;">-->
<!--                        <label>&nbsp;<input type="radio" name="zhucitongyi" value="2" id="Myradio"-->
<!--                                            lay-filter="demo-radio-filter"></label>&nbsp;&nbsp;-->
<!--                        <label th:each="xz:${consultations}">我已同意<a target="_blank" style="color: blue"-->
<!--                                                                        th:href="@{'/notice/newsInfo?&id='+${xz.id}+'&name=注册须知'}"-->
<!--                                                                        th:text="${xz.title}"></a></label>-->
<!--                    </div>-->
                    <div class="div_3">
                        <button type="submit" style="width: 100%;" class="layui-btn ">注册</button>
                        <div style="display: flex; justify-content: space-between;">
                            <span class="layui-btn" style="background: none;padding: 0;margin: 0;width: 100px;
                       text-align: left;   margin-top: 10px;  color:#0069ac; font-size: 14px; ">
                                 <a style="color:#0069ac; font-size: 14px;" href="/cultivate/cultivateLogins?name=0">
                                     已有账号 点击登录
                            </a></span>


                        </div>
                        <!--                        <span class="sp_2"><button type="submit" class="bt_2">提交</button></span>-->
                    </div>
                </form>
            </div>
            <!--            验证码登录-->
            <div style="display: none" id="YZM">
                <div class="div_3"
                     style="height: 70px;display: flex; flex-direction: column; align-items: flex-start; ">
                    <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">
                        <input style="width: calc(100% - 90px);" id="YZMFormmobile" name="YZMFormmobile" type="number"
                               class=" layui-input" placeholder="请输入手机号"/>
                        <button type="button" onclick="send(this,2)"
                                class="layui-btn layui-bg-blue layui-input-split layui-input-suffix "
                                style="width: 100px;pointer-events: painted;">获取验证码
                        </button>
                    </div>
                </div>
                <div class="div_3"
                     style="height: 70px;display: flex; flex-direction: column; align-items: flex-start; ">
                    <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">
                        <input name="YZMFormcode" id="YZMFormcode" type="text" class=" layui-input"
                               placeholder="请输入验证码"/>

                    </div>
                </div>

                <div class="div_3">
                    <button onclick="YZMlog();" style="width: 100%;" class="layui-btn ">登录</button>
                    <div style="display: flex; justify-content: space-between;">
                            <span class="layui-btn" style="background: none;padding: 0;margin: 0;width: 100px;
                       text-align: left;   margin-top: 10px;  color:#0069ac; font-size: 14px; ">
                                 <a style="color:#0069ac; font-size: 14px;" href="/cultivate/cultivateLogins?name=0">
                                     密码登录
                            </a></span>
                        <span class="layui-btn"
                              style="background: none;padding: 0;margin: 0;width: 100px;    text-align: right;   margin-top: 10px;  color:#0069ac; font-size: 14px; ">
                                 <a style="color:#0069ac; font-size: 14px;" href="/cultivate/cultivateLogins?name=1">
                                     注册
                            </a></span>

                    </div>
                    <!--                        <span class="sp_2"><button type="submit" class="bt_2">提交</button></span>-->
                </div>

            </div>

        </section>
    </div>
</div>

</body>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/js/plugins/validate/jquery.validate.extend.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript">
    //回车登录
    document.onkeydown = cdk;
    //选择状态
    // var myChecked = false
    $(function () {
       window.localStorage.clear();
        validateRule();
        //设置select
        layui.use('form', async () => {
            var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
            //设置数据
            getSelect()
            // select 事件
            await form.on('select(select-filter-One)', function (data) {
                var value = data.value; // 获得被选中的值
                console.log('===获得被选中的值=>', value)
            });
            console.log('==console=设置完raconsoledio成 lay-filter="radiodemo-radio-filter"=>')

            // form.on('radio(demo-radio-filter)', function (data) {
            //     myChecked = data.elem.checked; // 获得 radio 选中状态
            // });

            //因此你需要在相应的地方，执行下述方法来进行渲染
            form.render();
        });


        var isName = $("#isName").val();
        change(isName == '2' ? '0' : isName);
        $('.headersp').click(function () {
            change($(this).attr("data-id"));
        });
    });

    function cdk() {
        if (event.keyCode == 13) {
            log();
        }
    }
    $('#mobiles').blur(function () {
        var mobiles = $("#mobiles").val();
        if (!(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(mobiles))) {
            layer.msg('手机号码填写错误，请填写正确的手机格式');
            return false
        }
    })

    const getSelect = async () => {
        var typeData = `<option value="">请选择账号类型</option>`
        //掉接口
        // for (let i = 1; i < 4; i++) {
        typeData += `  <option value="3">教师</option>
<!--                             <option value="4">管理员</option>-->
                            <option value="5">学生</option> `

        // }

        await $('#selectOne').html(typeData);
    }


    function change(isName) {
        console.log('==change=====', isName)
        $("#YZM").css("display", "none");
        // if ($("#isName").val() == '2') {
        //     //注册
        //     $("#mysectionLeftImg").css("right", "435px")
        //     $("#mysectionLeftImg").css("height", "550px")
        //     $("#mysectionLeftImg").css("width", "900px")
        //
        //     $("#mysection").css("padding", "80px 40px")
        //     $("#mysection").css("top", "50px")
        //     $("#mysection").css("width", "550px")
        //     $("#mysection").css("height", "550px")
        //     $("#mysection").css("right", "-100px")
        //
        //     $("#headerOne").css("display", "flex");
        //     $("#headerTwo").css("display", "none");
        //
        //     $("#login").css("display", "none");
        //     $("#reg").css("display", "none");
        //     if (isName == '0') {
        //         $("#loginSpan").addClass("headerClick");
        //         $("#loginSpan1").removeClass("headerClick");
        //     } else {
        //         $("#loginSpan").removeClass("headerClick");
        //         $("#loginSpan1").addClass("headerClick");
        //     }
        //     $("#identity").attr("value", isName == '0' ? '0' : '1');
        //     $("#YZM").css("display", "inline");
        //     console.log('==change=====isName == \'0\'?\'0\':\'1\'', isName == '0' ? '0' : '1')
        // } else {

            if (isName == '0') {
                $("#mysectionLeftImg").css("right", "435px")
                $("#mysectionLeftImg").css("height", "600px")
                $("#mysectionLeftImg").css("width", "900px")

                $("#mysection").css("padding", "80px 40px")
                $("#mysection").css("top", "50px")
                $("#mysection").css("width", "550px")
                $("#mysection").css("height", "600px")
                $("#mysection").css("right", "-100px")

                $("#headerOne").css("display", "flex");
                $("#headerTwo").css("display", "none");

                $("#login").css("display", "inline");
                $("#reg").css("display", "none");
                $("#loginSpan").addClass("headerClick");
                $("#loginSpan1").removeClass("headerClick")
                $("#identity").attr("value", 0);

            }
            if (isName == '01') {
                $("#mysectionLeftImg").css("right", "435px")
                $("#mysectionLeftImg").css("height", "600px")
                $("#mysectionLeftImg").css("width", "900px")

                $("#mysection").css("padding", "80px 40px")
                $("#mysection").css("top", "50px")
                $("#mysection").css("width", "550px")
                $("#mysection").css("height", "600px")
                $("#mysection").css("right", "-100px")

                $("#headerOne").css("display", "flex");
                $("#headerTwo").css("display", "none");

                $("#login").css("display", "inline");
                $("#reg").css("display", "none");
                $("#loginSpan").removeClass("headerClick");
                $("#loginSpan1").addClass("headerClick");
                $("#identity").attr("value", 1);

            }
            if (isName == '1') {
                //注册
                $("#mysectionLeftImg").css("right", "435px")
                // $("#mysectionLeftImg").css("height", "760px")
                $("#mysectionLeftImg").css("height", "600px")
                $("#mysectionLeftImg").css("width", "900px")

                $("#mysection").css("padding", "80px 40px")
                $("#mysection").css("top", "50px")
                // $("#mysection").css("height", "760px")
                $("#mysection").css("height", "600px")
                $("#mysection").css("width", "550px")
                $("#mysection").css("right", "-100px")


                $("#headerOne").css("display", "none");
                $("#headerTwo").css("display", "inline");

                $("#login").css("display", "none");
                $("#reg").css("display", "inline");
                $("#loginSpan").removeClass("headerClick");
                $("#loginSpan1").removeClass("headerClick");
                $("#identity").attr("value", 1);

            }
        // }
    }

    function YZMlog() {
        console.log('验证码登录')
        var mobile = $("#YZMFormmobile").val();
        var code = $("#YZMFormcode").val();
        var identity = $("#identity").val();
        console.log('==', identity)
        if ('' == mobile) {
            layer.msg('请输入手机号');
            return false
        }
        if ('' == code) {
            layer.msg('请输入验证码');
            return false
        }
        $.ajax({
            url: '/certificate/sendPhoneLogin',
            type: 'POST',
            data: {
                username: mobile,
                code: code,
                identity: identity
            },
            success: function (r) {
                if (r.code == 0) {
                    window.localStorage.setItem("token", r.data.token);
                    window.localStorage.setItem("userName", r.data.userName);
                    //未读消息数量
                    window.localStorage.setItem("unreadNum0", r.data.unreadNum0);
                    window.localStorage.setItem("unreadNum1", r.data.unreadNum1);
                    window.localStorage.setItem("type", r.data.type);
                    window.localStorage.setItem("userId", r.data.userId);
                    window.localStorage.setItem("mobile", r.data.mobile);
                    location.href = '/cultivate/logTransition'


                } else {
                    layer.msg(r.msg);
                }
            }
        })

    }

    function log() {
        var userName = $("#name").val();
        var password = $("#pass").val();
        const identity = $("#identity").val();
        console.log('identity', identity)

        if ('' == userName) {
            layer.msg('请输入用户名');
            return false
        }
        if ('' == password) {
            layer.msg('请输入密码');
            return false
        }

        var s = "";
        for (var i = 0; i < password.length; i++) {
            s += String.fromCharCode(password.charAt(i).charCodeAt() ^ 't'.charCodeAt());
        }
        $.ajax({
            url: '/certificate/sendLogin',
            type: 'POST',
            data: {
                username: userName,
                password: s,
                identity: identity

            },
            success: function (r) {
                if (r.code == 0) {
                    window.localStorage.setItem("token", r.data.token);
                    window.localStorage.setItem("userName", r.data.userName);
                    //未读消息数量
                    window.localStorage.setItem("unreadNum0", r.data.unreadNum0);
                    window.localStorage.setItem("unreadNum1", r.data.unreadNum1);
                    window.localStorage.setItem("type", r.data.type);
                    window.localStorage.setItem("userId", r.data.userId);
                    window.localStorage.setItem("mobile", r.data.mobile);


                    location.href = '/cultivate/logTransition'


                } else {
                    layer.msg(r.msg);
                }
            }
        })
    }


    $.validator.setDefaults({
        submitHandler: function () {
            reg();
        }
    });

    function reg() {
        console.log('erialize()' + $('#signupForm').serialize())
        // if (!myChecked) {
        //     layer.msg("请勾选已阅读注册须知");
        //     return false
        // }
        //确认密码validateRule
        // if ($("#password").val() !== $("#passwordtwo").val()) {
        //     layer.msg('两次密码不一致，请重新输入');
        //     return false
        // }
        if ($('#signupForm').serialize().indexOf('type=&') > -1) {
            layer.msg("请选择账号类型");
            return false
        }

        //判断

        $.ajax({
            type: "POST",
            url: '/certificate/sendRegister',
            data: $('#signupForm').serialize(),
            success: function (r) {
                if (r.code == 0) {
                    window.localStorage.setItem("token", r.data.token);
                    window.localStorage.setItem("userName", r.data.userName);
                    //未读消息数量
                    window.localStorage.setItem("unreadNum0", r.data.unreadNum0);
                    window.localStorage.setItem("unreadNum1", r.data.unreadNum1);
                    window.localStorage.setItem("type", r.data.type);
                    window.localStorage.setItem("userId", r.data.userId);
                    window.localStorage.setItem("mobile", r.data.mobile);

                    layer.msg("注册成功，请稍等",{
                        icon: 1,
                        time: 3000
                    },()=>{
                        location.href = '/cultivate/logTransition'
                    })


                } else {
                    layer.msg(r.msg);
                }
    //             if (r.msg == '请求成功') {
    //                 debugger
    //
    // console.log("res====>",r)
    //                 // location.href = "/cultivate/cultivateLogins?name=0";
    //             } else {
    //                 layer.msg(r.msg)
    //             }
            }
        });
    }

    $('#passwords').blur(function () {
        var psd = $('#passwords').val()
        if (!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/.test(psd))) {
            layer.msg('您的密码复杂度太低（密码中必须包含字母、数字且不小于8个字符）');
            return false
        }

    })

    function checkMobile(sMobile) {
        if (!(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(sMobile))) {
            layer.msg('手机号码填写错误，请填写正确的手机格式');
            document.mobileform.mobile.focus();
            return false;
        }
        return true;
        var reg = new RegExp("");
    }

    var countdown = 60;

    function settime(val) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            // val.value = "获取验证码";
            $(val).text("获取验证码");
            countdown = 60;
        } else {
            val.setAttribute("disabled", true);
            // val.value = "" + countdown + "";
            $(val).text("重新发送(" + countdown + ")")
            countdown--;
            var myVar = setTimeout(function () {
                settime(val)
            }, 1000)
        }
    }

    //发送验证码
    function send(val, number) {
        var name = $(number == 1 ? "#mobile" : "#YZMFormmobile").val();
        val.setAttribute("disabled", true);

        if (name.length != 0) {
            jQuery.ajax({
                url: '/certificate/sendRegCode',
                type: 'POST',
                data: {mobile: name},
                success: function (data) {
                    checkMobile(name);
                    if (data == 1) {
                        // val.value = "获取验证码";
                        $(val).text("获取验证码");
                        countdown = 60;
                        layer.msg(data.msg)
                        val.removeAttribute("disabled");
                    } else {
                        layer.msg(data.msg);

                        // val.value = "" + countdown + ""
                        $(val).text("重新发送(" + countdown + ")")
                        countdown--;
                        console.log('=====', countdown)
                        setTimeout(function () {
                            settime(val)
                        }, 1000)
                    }
                }
            })
        } else {
            layer.msg('请输入手机号！');
            val.removeAttribute("disabled");
        }
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i>";
        $("#signupForm").validate({
            rules: {
                type: {
                    required: true
                },
                name: {
                    required: true
                },
                num: {
                    required: true
                },
                // password: {
                //     required: true,
                //     checkPassword1: true,
                //     minlength: 8,
                //     maxlength: 15
                // },
                // passwordtwo:{
                //     required: true,
                // },
                mobile: {
                    required: true,
                    isPhone: true
                },
                code: {
                    required: true
                }
            },
            messages: {
                type: {
                    required: icon + "请选择登录类型"
                },
                name: {
                    required: icon + "请输入用户名"
                },
                num: {
                    required: icon + "请输入工号"
                },
                // password: {
                //     required: icon + "请输入密码",
                //     minlength: '密码最少8位',
                //     maxlength: '密码最长15位'
                // },
                // passwordtwo: {
                //     required: icon + "请确认密码",
                //     minlength: '密码最少8位',
                //     maxlength: '密码最长15位'
                // },
                mobile: {
                    required: icon + "请输入手机号"
                },
                code: {
                    required: icon + "请输入验证码"
                }
            }
        })
    }

</script>
</html>